<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

	<head>

		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
		<link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
		<link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
		<link th:href="@{/css/animate.css}" rel="stylesheet"/>
		<link th:href="@{/css/style.css}" rel="stylesheet"/>

	</head>
	<style>
		.headCss{
			position: absolute;
			margin-top: 10px;
		}


	</style>
	<body>

		<div class="col-sm-12">
			<!-- Example Events -->
			<div class="example-wrap">
				<div class="headCss">
					
					<div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
						<button type="button" class="btn btn-outline btn-default" onclick="add()">
                                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                    </button>
						<button type="button" class="btn btn-outline btn-default" onclick="change()">
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                    </button>
						<button type="button" class="btn btn-outline btn-default" onclick="delet()">
                                        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                                    </button>
						<button type="button" class="btn btn-outline btn-default" onclick="F5()">
							<i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
						</button>
					</div>
				</div>
					<form id="form" method="post" action="#">
					<table id="exampleTableEvents" data-height="600" data-mobile-responsive="true">
						<thead>
							<tr >
								<th data-field="state" data-checkbox="true"></th>
								<th data-field="roleId">ID</th>
								<th data-field="roleName">角色名称</th>
								<th data-field="roleMemo">角色描述</th>
								<th data-field="createTime" data-formatter="dateTimeFormat">操作时间</th>
							</tr>
						</thead>
					</table>
					</form>
			</div>
			<!-- End Example Events -->
		</div>

	</body>
	<!-- 全局js -->
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/js/plugins/layer/layer.min.js}"></script>

	<!-- 自定义js -->
	<script th:src="@{/js/content.js}"></script>

	<!-- Bootstrap table -->
	<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
	<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
	<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
	<!-- Peity -->
	<script th:src="@{/js/demo/systemjs.js}"></script>

	<script th:inline="javascript">


        /* <![CDATA[ */
        var roles=  [[${roles}]];
       	console.log(roles);
        var bt_date=roles;

        function dateTimeFormat(value) {
            var dateVal = value + "";
            if (value != null) {
                var date=new Date(dateVal);

                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
            }
        }

        $('#exampleTableEvents').bootstrapTable({
            data: bt_date,
            search: true,
            pagination: true,
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            iconSize: 'outline',
            toolbar: '#meetTableTools',
            icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list'
            }
        });


			function add() {
                var id=bt_date.pop().roleId;
                $.ajax({
                    type: "POST",
                    url: "roleaddView.shtml",
                    async:false,
                    data: {"roleId":id},
                    success: function(data){
                        layer.open({
                            type: 2,
                            title: '角色添加',
                            shadeClose: true,
                            shade: false,
                            area: ['450px', '450px'],
                            content: 'roleaddView.shtml' //iframe的url

                        });
                    }
                })
			}

        function change() {
            var check=$("tbody .selected");
            var checknum=check.length;
            var deptIds=check.children().eq(1).text();

            if(checknum==0){
                layer.msg("请选择你需要修改的数据。")
            }else if(checknum>1){
                layer.msg("一次只能修改一条数据。")
            }else {
                //修改
                var role={
                    "roleId":check.children().eq(1).text(),
                    "roleName":check.children().eq(2).text(),
                    "roleMemo":check.children().eq(3).text()
                }
                //console.log(department);

                $.ajax({
                    type: "POST",
                    url: "roleUpdateView.shtml",
                    async:false,
                    data: role,
                    success: function(data){
                        //location.reload();
                        layer.open({
                            type: 2,
                            title: '角色修改',
                            shadeClose: true,
                            shade: false,
                            area: ['450px', '450px']
                            ,content: 'roleUpdateView.shtml' //iframe的url
                        });
                    }
                })

            }





        }

        /* ]]> */

        function delet(){
            var check=$("tbody .selected");
            var roleIds=[];

            /* <![CDATA[ */
            for(var i=0;i<check.length;i++){
                roleIds.push(check.eq(i).children("td").eq(1).text());
            }

            if(roleIds.length<=0){
                layer.msg("请至少选择一条需要删除的数据。");
            }else{
                layer.msg('你确定要删除这'+roleIds.length+'条数据吗？', {
                    time: 0 //不自动关闭
                    ,btn: ['确定', '取消']
                    ,yes: function(index){
                        $.ajax({
                            type: "POST",
                            url: "roleDelet.shtml",
                            async:false,
                            data: {
                                "roleIds":roleIds
                            },
                            success: function(data){
                                layer.msg("删除成功");
                                setTimeout(function () {
                                    location.reload();
                                },1000)
                            }
                        })
                        layer.close(index);

                    }
                });

            }

            /* ]]> */
        }
        function F5() {
            location.reload();
        }


		</script>
		

</html>